<script setup>
import { formatDate } from '@/utils/day';
import { formatDuration } from '@/utils/time';

const props = defineProps({
  video: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['view-detail', 'remove']);

function handleClick() {
  emit('view-detail', props.video.id);
}

function handleRemove(event) {
  event.stopPropagation();
  emit('remove', props.video.video_id, event);
}
</script>

<template>
  <div class="favorite-video-card" @click="handleClick">
    <div class="video-cover-container">
      <img :src="video.cover_url" alt="视频封面" class="video-cover">
      <span class="video-duration">{{ formatDuration(video.duration) || "12:30" }}</span>
    </div>
    <div class="video-info">
      <h4 class="video-title">{{ video.title }}</h4>
      <div class="video-stats">
        <!-- <span class="stat">
          <i class="icon-play"></i> {{ video.viewCount }}
        </span> -->
        <span class="stat">
          <SvgIcon icon-class="unlove"/>
          <span style="margin-left: 4px;">{{ video.likes_count || 0 }}</span>
        </span>
        <span class="video-date">{{ formatDate(video.created_at) }}</span>
      </div>
    </div>
    <button class="remove-button" @click="handleRemove">
      <i class="icon-delete">🗑️</i>
    </button>
  </div>
</template>

<style scoped lang="scss">
.favorite-video-card {
  background-color: #1f2129;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

    .video-cover {
      transform: scale(1.05);
    }

    .remove-button {
      opacity: 1;
    }
  }

  .video-cover-container {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    height: 65%;
    overflow: hidden;

    .video-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .video-duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8rem;
    }
  }

  .video-info {
    flex: 1;
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .video-title {
      margin: 0 0 12px 0;
      font-size: 1.05rem;
      font-weight: 500;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .video-stats {
      display: flex;
      align-items: center;
      font-size: 0.85rem;
      color: #99a3a7;

      .stat {
        display: flex;
        align-items: center;
        margin-right: 12px;

        i {
          margin-right: 4px;
        }
      }

      .video-date {
        margin-left: auto;
        font-size: 0.8rem;
      }
    }
  }

  .remove-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
    color: #ffcc00;

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
      transform: scale(1.1);
    }

    .icon-remove {
      font-size: 1.2rem;
    }
  }
}
</style>